import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 1000 ? 1600 : 800
    height: Screen.height > 1000 ? 2560 : 741
    visible: true
    title: "GraphicsEffect"

    // 根据屏幕大小计算缩放因子
    readonly property real scaleFactor: width > 1000 ? 2.0 : 1.0
    readonly property real imageSize: 192 * scaleFactor
    readonly property real fontSize: 14 * scaleFactor
    readonly property real titleFontSize: 18 * scaleFactor

    // 属性：控制各种效果的参数
    property real blurRadius: 0        // 模糊半径 0-30
    property real opacityValue: 1.0     // 透明度 1.0-0.0 (值越大越透明)
    property real colorizeStrength: 0.0 // 颜色强度 0.0-1.0
    property real dropShadowRadius: 0   // 阴影模糊半径 0-100

    Rectangle {
        anchors.fill: parent
        color: "#f0f0f0"

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 0
            spacing: 0

            // 主内容区域 - 2x2 图片网格
            Rectangle {
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "#f0f0f0"  // 整个界面都是灰色

                // 2x2 网格布局
                GridLayout {
        anchors.centerIn: parent
                    columns: 2
                    rowSpacing: 60 * scaleFactor
                    columnSpacing: 100 * scaleFactor

                    // 第一行第一列：模糊效果
                    Column {
                        spacing: 20 * scaleFactor
                        Layout.alignment: Qt.AlignHCenter

                        Text {
                            text: "模糊"
                            font.pixelSize: titleFontSize
                            font.family: "微软雅黑"
                            font.bold: true
                            color: "#000000"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }

                        // 直接显示图片，不需要白色背景
                        Item {
                            width: imageSize
                            height: imageSize

                            Image {
                                id: blurImage
                                anchors.fill: parent
                                source: "qrc:/images/1.png"
                                fillMode: Image.PreserveAspectFit
                                visible: false  // 始终不可见，通过 FastBlur 显示
                            }

                            ShaderEffectSource {
                                id: blurSource
                                anchors.fill: blurImage
                                sourceItem: blurImage
                                hideSource: true
                            }

                            FastBlur {
                                anchors.fill: parent
                                source: blurSource
                                radius: blurRadius * 2.5  // 大幅增强模糊效果，将半径放大2.5倍
                                transparentBorder: true  // 设置为true以消除边缘边框
                            }
                        }
                    }

                    // 第一行第二列：透明效果
                    Column {
                        spacing: 20 * scaleFactor
                        Layout.alignment: Qt.AlignHCenter

                        Text {
                            text: "透明"
                            font.pixelSize: titleFontSize
                            font.family: "微软雅黑"
                            font.bold: true
                            color: "#000000"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }

                        // 直接显示图片，不需要白色背景
                        Image {
                            id: opacityImage
                            width: imageSize
                            height: imageSize
                            source: "qrc:/images/2.png"
                            fillMode: Image.PreserveAspectFit
                            opacity: opacityValue
                        }
                    }

                    // 第二行第一列：颜色效果
                    Column {
                        spacing: 20 * scaleFactor
                        Layout.alignment: Qt.AlignHCenter

                        Text {
                            text: "颜色"
                            font.pixelSize: titleFontSize
                            font.family: "微软雅黑"
                            font.bold: true
                            color: "#000000"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }

                        // 直接显示图片，不需要白色背景
                        Item {
                            width: imageSize
                            height: imageSize

                            Image {
                                id: colorizeImage
                                anchors.fill: parent
                                source: "qrc:/images/3.png"
                                fillMode: Image.PreserveAspectFit
                                visible: false
                            }

                            ShaderEffectSource {
                                id: colorizeSource
                                anchors.fill: colorizeImage
                                sourceItem: colorizeImage
                                hideSource: true
                            }

                            ColorOverlay {
                                anchors.fill: parent
                                source: colorizeSource
                                // QGraphicsColorizeEffect 使用 QColor(0, 0, 0, 100) 和 setStrength(0.0-1.0)
                                // ColorOverlay 只是在原图上叠加颜色，不会改变原图
                                // QColor(0, 0, 0, 100) 的 alpha 是 100/255 ≈ 0.39
                                // strength 控制叠加强度，alpha = 0.39 * strength
                                color: Qt.rgba(0, 0, 0, colorizeStrength * 0.39)
                            }
                        }
                    }

                    // 第二行第二列：阴影效果
                    Column {
                        spacing: 20 * scaleFactor
                        Layout.alignment: Qt.AlignHCenter

                        Text {
                            text: "阴影"
                            font.pixelSize: titleFontSize
                            font.family: "微软雅黑"
                            font.bold: true
                            color: "#000000"
                            anchors.horizontalCenter: parent.horizontalCenter
                        }

                        // 直接显示图片，不需要白色背景
                        Item {
                            width: imageSize
                            height: imageSize

                            Image {
                                id: dropShadowImage
                                anchors.fill: parent
                                source: "qrc:/images/4.png"
                                fillMode: Image.PreserveAspectFit
                                visible: false
                            }

                            ShaderEffectSource {
                                id: shadowSource
                                anchors.fill: dropShadowImage
                                sourceItem: dropShadowImage
                                hideSource: true
                            }

                            DropShadow {
                                anchors.fill: parent
                                source: shadowSource
                                radius: dropShadowRadius * 1.8  // 大幅增强阴影模糊半径
                                samples: Math.max(16, Math.floor(dropShadowRadius / 3) + 16)  // 增加采样数以提升质量
                                color: "#D0000000"  // 进一步增强阴影不透明度（约81%）
                                horizontalOffset: dropShadowRadius > 0 ? 12 : 0  // 大幅增加水平偏移
                                verticalOffset: dropShadowRadius > 0 ? 12 : 0    // 大幅增加垂直偏移
                            }
                        }
                    }
                }
            }

            // 控制区域 - 两行滑块
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 200 * scaleFactor
                color: "#f0f0f0"

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 30 * scaleFactor
                    spacing: 20 * scaleFactor

                    // 第一行：模糊和透明滑块
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 40 * scaleFactor

                        // 模糊滑块
                        RowLayout {
                            Layout.fillWidth: true
                            spacing: 20 * scaleFactor

                            Text {
                                text: "模糊"
                                font.pixelSize: fontSize
                                font.family: "微软雅黑"
                                color: "#000000"
                                Layout.preferredWidth: 60 * scaleFactor
                            }

                            Slider {
                                id: blurSlider
                                Layout.fillWidth: true
                                from: 0
                                to: 30
                                value: blurRadius
                                implicitHeight: 40 * scaleFactor
                                onValueChanged: {
                                    blurRadius = value
                                }
                            }
                        }

                        // 透明滑块
                        RowLayout {
                            Layout.fillWidth: true
                            spacing: 20 * scaleFactor

                            Text {
                                text: "透明"
                                font.pixelSize: fontSize
                                font.family: "微软雅黑"
                                color: "#000000"
                                Layout.preferredWidth: 60 * scaleFactor
                            }

                            Slider {
                                id: opacitySlider
                                Layout.fillWidth: true
                                from: 0
                                to: 10
                                value: 10 - (opacityValue * 10) // 反转：滑块值越大，透明度越低
                                implicitHeight: 40 * scaleFactor
                                onValueChanged: {
                                    opacityValue = 1.0 - (value / 10.0)
                                }
                            }
                        }
                    }

                    // 第二行：颜色和阴影滑块
                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 40 * scaleFactor

                        // 颜色滑块
                        RowLayout {
                            Layout.fillWidth: true
                            spacing: 20 * scaleFactor

                            Text {
                                text: "颜色"
                                font.pixelSize: fontSize
                                font.family: "微软雅黑"
                                color: "#000000"
                                Layout.preferredWidth: 60 * scaleFactor
                            }

                            Slider {
                                id: colorizeSlider
                                Layout.fillWidth: true
                                from: 0
                                to: 10
                                value: colorizeStrength * 10
                                implicitHeight: 40 * scaleFactor
                                onValueChanged: {
                                    colorizeStrength = value / 10.0
                                }
                            }
                        }

                        // 阴影滑块
                        RowLayout {
                            Layout.fillWidth: true
                            spacing: 20 * scaleFactor

        Text {
                                text: "阴影"
                                font.pixelSize: fontSize
                                font.family: "微软雅黑"
                                color: "#000000"
                                Layout.preferredWidth: 60 * scaleFactor
                            }

                            Slider {
                                id: dropShadowSlider
                                Layout.fillWidth: true
                                from: 0
                                to: 100
                                value: dropShadowRadius
                                implicitHeight: 40 * scaleFactor
                                onValueChanged: {
                                    dropShadowRadius = value
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
